<clr-datagrid>
  <clr-dg-column>{{'HELM_CHART.NAME' | translate}}</clr-dg-column>
  <clr-dg-column>{{'HELM_CHART.VERSION' | translate}}</clr-dg-column>
  <clr-dg-column>{{'HELM_CHART.STATUS' | translate }}</clr-dg-column>
  <clr-dg-column>{{'HELM_CHART.MAINTAINERS' | translate }}</clr-dg-column>
  <clr-dg-column>{{'HELM_CHART.CREATED' | translate }}</clr-dg-column>
  <clr-dg-placeholder>{{'HELM_CHART.NO_VERSION_PLACEHOLDER' | translate }}</clr-dg-placeholder>
  <clr-dg-row *clrDgItems="let chart of charts" [clrDgItem]="chart">
      <clr-dg-cell>
          <a href="javascript:void(0)" (click)="gotoChartVersion(chart.Chart)">{{ chart.Name }}</a>
        </clr-dg-cell>
      <clr-dg-cell>{{ chart.Chart.version }}</clr-dg-cell>
      <clr-dg-cell>{{ getStatusString(chart.Chart) | translate }}</clr-dg-cell>
      <clr-dg-cell>{{ getMaintainerString(chart.Chart.maintainers) | translate : getMaintainerTranslateInfo(chart.Chart.maintainers) }}</clr-dg-cell>
      <clr-dg-cell>{{ chart.Chart.created | date}}</clr-dg-cell>
  </clr-dg-row>
  <clr-dg-footer>
      <clr-dg-pagination #pagination [clrDgPageSize]="5" [clrDgTotalItems]="charts?.length">
          <span *ngIf="charts?.length">
              {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} {{'HELM_CHART.OF' | translate}}
          </span>
          {{charts?.length}} {{'HELM_CHART.ITEMS'| translate}}
      </clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>